import React, { Component, Fragment } from 'react';
import { near_list } from '../../api'
import '../../styles/home/nearfood.css'

class Nearfood extends Component{
    constructor(){
        super()
        this.state={
            near_list:[]
        }
    }
    componentDidMount(){
        near_list()
      .then(res => {
       this.setState({
            near_list:res.data
       })
      })
    }
    render(){
        // console.log(this.state.near_list)
        let items=this.state.near_list
        
        let newitems=items.map(val=>{
        let icons=val.supports.map((v)=>{
                return (
                    <span key={v.id}>
                       {v.icon_name}
                    </span>
                )
            })
            return (
                <li key={val.id}>
                    <img src={'//elm.cangdu.org/img/'+val.image_path} alt="失踪了"/>
                    <div>
                            <p>
                                <i>
                                    <span className="logo_1">品牌</span>
                                    <span className="name_1">{val.name}</span>
                                </i>

                                <b className="supot_1">
                                 {icons}
                                </b>
                            </p>
                            <p>
                                <span>
                                    月做{val.recent_order_num}单
                                </span>
                                <span className="right_1">
                                    {val.delivery_mode.text}
                                </span>
                            </p>
                            <p>
                                <i>
                                    <span>{val.float_minimum_order_amount}元起送</span>/
                                    <span>配送费约{val.float_delivery_fee}元</span>
                                </i>
                                <i className="right_1">
                                    <span>{val.distance}</span>/
                                    <span>{val.order_lead_time}</span>
                                </i>
                            </p>
                    </div>
                </li>
            )
        })
        return (
            <Fragment>
                <div>
                    <ul className='near_list'>
                        <h3>附近商家</h3>
                       {newitems}
                    </ul>

                </div>

            </Fragment>
        )
    }
}
export default Nearfood